.screen-wrapper {
  width: 100vw;
  height: 100vh;
  background: url(../../views/screen/images/bg.png) no-repeat;
  background-size: cover;
  .screen {
    width: 1920px;
    height: 1080px;
    position: fixed;
    left: 50%;
    top: 50%;
    &_top {
      width: 100%;
      height: 50px;
      &_head {
        width: 100%;
        height: 50px;
        display: flex;
        &__lf {
          flex: 1;
          background: url(../../views/screen/images/dataScreen-header-left-bg.png)
            no-repeat;
          background-size: cover;
          &__home {
            width: 100px;
            height: 50px;
            float: right;
            background: url(../../views/screen/images/dataScreen-header-btn-bg-l.png)
              no-repeat;
            background-size: 100% 100%;
            line-height: 50px;
            color: #29fcff;
            text-align: center;
            font-size: 20px;
            cursor: pointer;
          }
        }
        &__rt {
          flex: 1;
          background: url(../../views/screen/images/dataScreen-header-right-bg.png)
            no-repeat;
          background-size: cover;
          display: flex;
          justify-content: space-between;
          align-items: center;
          &__count {
            width: 150px;
            height: 50px;
            background: url(../../views/screen/images/dataScreen-header-btn-bg-r.png)
              no-repeat;
            background-size: 100% 100%;
            text-align: center;
            color: #29fcff;
            font-size: 20px;
            line-height: 50px;
            cursor: pointer;
          }
          &__datetime {
            color: #29fcff;
            margin-right: 20px;
          }
        }
        &__center {
          flex: 2;
          &__title {
            width: 100%;
            height: 70px;
            background: url(../../views/screen/images/dataScreen-header-center-bg.png)
              no-repeat;
            background-size: 100% 100%;
            text-align: center;
            line-height: 70px;
            color: #29fcff;
            font-size: 30px;
          }
        }
      }
    }
    &_main {
      display: flex;
      &_lf {
        flex: 1;
        height: 1040px;
        display: flex;
        flex-direction: column;
        margin-left: 20px;
        &__yk {
          flex: 1;
          background: url(../../views/screen/images/dataScreen-main-lb.png)
            no-repeat;
          background-size: 100% 100%;
          margin-top: 10px;
          color: #fff;
          font-size: 20px;

          &__top {
            &__block {
              width: 68px;
              height: 7px;
              background: url(../../views/screen/images/dataScreen-title.png)
                no-repeat;
              background-size: 100% 100%;
              margin-top: 10px;
            }

            &__num {
              float: right;
              margin-right: 10px;
              span {
                color: #29fcff;
              }
            }
          }

          &__number {
            padding: 20px;
            margin-top: 30px;
            display: flex;
            span {
              flex: 1;
              text-align: center;
              background: url(../../views/screen/images/total.png) no-repeat;
              background-size: 100% 100%;
              color: #29fcff;
            }
          }

          &__echart {
            width: 100%;
            height: 240px;
          }
        }
        &__sex {
          flex: 1;
          background: url(../../views/screen/images/dataScreen-main-cb.png)
            no-repeat;
          background-size: 100% 100%;
          color: #fff;
          font-size: 20px;
          margin: 20px 0;
          &__top {
            &__block {
              width: 68px;
              height: 7px;
              background: url(../../views/screen/images/dataScreen-title.png)
                no-repeat;
              background-size: 100% 100%;
              margin-top: 10px;
            }

            &__num {
              float: right;
              margin-right: 10px;
              span {
                color: #29fcff;
              }
            }
          }
          &__main {
            display: flex;
            justify-content: center;
            align-items: center;
            &__man {
              width: 111px;
              height: 115px;
              margin: 20px;
              background: url(../../views/screen/images/man-bg.png) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            &__women {
              width: 111px;
              height: 115px;
              margin: 20px;
              background: url(../../views/screen/images/woman-bg.png) no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          &__rate {
            display: flex;
            justify-content: space-around;
            font-size: small;
          }
          &__echart {
            width: 100%;
            height: 100px;
          }
        }
        &__age {
          flex: 1.5;
          background: url(../../views/screen/images/dataScreen-main-cb.png)
            no-repeat;
          background-size: 100% 100%;
          color: #fff;
          font-size: 20px;

          &__top {
            &__block {
              width: 68px;
              height: 7px;
              background: url(../../views/screen/images/dataScreen-title.png)
                no-repeat;
              background-size: 100% 100%;
              margin-top: 10px;
            }
          }
          &__echart {
            width: 100%;
            height: 200px;
          }
        }
      }
      &_rt {
        flex: 1;
        background-color: lightblue;
      }
      &_center {
        display: flex;
        flex-direction: column;
        flex: 2;
        padding: 0 15px;
        &__map {
          height: 700px;
        }
        &__line {
          flex: 1;
          background: url(../../views/screen/images/dataScreen-main-cb.png)
            no-repeat;
          background-size: 100% 100%;
          &__top {
            height: 80px;
            &__title {
              color: #fff;
              font-size: 20px;
            }
            &__block {
              width: 68px;
              height: 7px;
              background: url(../../views/screen/images/dataScreen-title.png)
                no-repeat;
              background-size: 100% 100%;
              margin-top: 10px;
            }
          }
          &__echart {
            width: 100%;
            height: 200px;
          }
        }
      }
    }
  }
}
